<template>
    <div class="greenmark">
        <div class="greenmark-rating-main">
            <span> Green Mark Rating</span>
            <el-switch class="greenmark-switch" :class="switchValue?'':'closeColor'" v-model="switchValue" @change="changeSwitch" active-color="#fff" inactive-color="#ccc" :width="45">
            </el-switch>
        </div>
        <div class="greenmark-rating-extra">
            <div :class="item.class" v-for="item in greenmarkList" :key="item.id" @click="changeChecked(item)">
                <div class="greenmark-icon-title">
                    <div :class="item.icon"> </div>
                    <span>{{item.title}}</span>
                </div>
                <div class="greenmark-el-progress">
                    <circleProgress :value="item.circleProgress" backgroundColor="#999" :color1="item.color1" :color2="item.color2">
                    </circleProgress>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import circleProgress from '@/components/echarts/circle-progress';
    import { getLift, getGreenBuilding, getCameraImage, getTrafficSpeed, getBridge, getCampus, getFlood, } from '@/api/data';
    import { SetCameraInfo, AddCustomPOI, AddPOI } from '@/util/poi'
    import { SetGreenMarkPoiOption } from '@/util/poiOption'
    export default {
        name: 'GREENMARK',
        props: [''],
        data() {
            return {
                switchValue: true,
                circleProgress1: 20,
                circleProgress2: 30,
                circleProgress3: 40,
                circleProgress4: 50,
                GreenBuildingData: [], //获取的绿色建筑
                greenBuildingList: [],
                greenmarkList: [{
                        id: 'Platinum',
                        icon: 'greenmark-icon1',
                        title: 'Platlnum',
                        circleProgress: 10,
                        backgroundColor: '#999',
                        color1: '#858585',
                        color2: '#FFFFFF',
                        class: 'greenmark-rating',
                        checked: false
                    },
                    {
                        id: 'GOLD plus',
                        icon: 'greenmark-icon2',
                        title: 'Gold Plus',
                        circleProgress: 10,
                        backgroundColor: '#999',
                        color1: '#F5F5DC',
                        color2: '#FFFF00',
                        class: 'greenmark-rating',
                        checked: false
                    },
                    {
                        id: 'Gold',
                        icon: 'greenmark-icon3',
                        title: 'Gold',
                        circleProgress: 10,
                        backgroundColor: '#999',
                        color1: '#FFFACD',
                        color2: '#FFD700',
                        class: 'greenmark-rating',
                        checked: false
                    },
                    {
                        id: 'Certified',
                        icon: 'greenmark-icon4',
                        title: 'Certified',
                        circleProgress: 10,
                        backgroundColor: '#999',
                        color1: '#90EE90',
                        color2: '#7CFC00',
                        class: 'greenmark-rating',
                        checked: false
                    },
                ]
            };
        },

        components: {
            circleProgress
        },


        beforeMount() {},

        async mounted() {
            // this.setCameraInfo()
            this.greenBuildingList = await getGreenBuilding();
            // 存储poi信息
            this.$store.commit('app/SAVE_GREENMARK_POI_DATA', this.greenBuildingList.GreenBuilding)
            let html = location.origin + '/html/greenmark.html?content=' + JSON.stringify(this.greenBuildingList.GreenBuilding[0])
            //window.open(html)
            this.addPoi()


        },

        methods: {
            // //设置当前镜头视界
            // setCameraInfo() {
            //   let jsondata = SetCameraInfo("103.888489,1.425011")
            //   window.cloudRender.SuperAPI("SetCameraInfo", jsondata)
            // },
            //增加pol点
            async addPoi() {
                let removeJsondata = {
                    "covering_type": "poi" //覆盖物类型, 详见下表
                }
                let Platinum1 = 0,
                    Platinum2 = 0,
                    Platinum3 = 0,
                    Platinum4 = 0;
                window.cloudRender.SuperAPI("RemoveAllCovering", removeJsondata);
                // 循环打点
                if (Array.isArray(this.greenBuildingList.GreenBuilding) && this.greenBuildingList.GreenBuilding.length > 1) {
                    for (let i = 0; i < this.greenBuildingList.GreenBuilding.length; i++) {
                        let html = location.origin + '/html/greenmark.html?content=' + JSON.stringify(this.greenBuildingList.GreenBuilding[i])
                        let { guid, lon, lat, imageurl } = this.greenBuildingList.GreenBuilding[i];
                        let awardachieved = this.greenBuildingList.GreenBuilding[i].awardachieved;
                        let markerUrl = SetGreenMarkPoiOption(awardachieved).markerUrl
                        let jsondata = AddCustomPOI(guid, lon + ',' + lat, html, markerUrl);
                        window.cloudRender.SuperAPI("AddCustomPOI", jsondata, (status, progress) => {
                            console.log(status, progress, '加入poi点第', i);
                        })
                        switch (awardachieved) {
                            case 'Platinum':
                                Platinum1++;
                                break;
                            case 'GOLD plus':
                                Platinum2++;
                                break;
                            case 'Gold':
                                Platinum3++;
                                break;
                            case 'Certified':
                                Platinum4++;
                                break;
                        }
                    }
                    let arr = this.greenmarkList;
                    arr[0].circleProgress = Platinum1;
                    arr[1].circleProgress = Platinum2;
                    arr[2].circleProgress = Platinum3;
                    arr[3].circleProgress = Platinum4;
                    // this.greenmarkList = [...arr];

                    // 聚焦所有POI
                    setTimeout(() => {
                        window.cloudRender.SuperAPI('FocusAllPOI')
                    }, 500)
                }
            },
            //点击面板
            changeChecked(item) {
                console.log(item, '测试测试1111');
                //显示或隐藏poi点
                let jsondata = {
                    "id": "poi_id", //覆盖物id
                    "covering_type": "poi", //覆盖物类型, 详见下表
                    "bshow": true //true:显示; false:隐藏
                }
                let checkedArr = this.greenBuildingList.GreenBuilding.filter(v => v.awardachieved === item.id);
                checkedArr.forEach(v => {
                    jsondata.id = v.guid;
                    !item.checked ? jsondata.bshow = false : jsondata.bshow = true;
                    window.cloudRender.SuperAPI("ShowHideCovering", jsondata)
                });
                //面板的显示和隐藏
                let arr = this.greenmarkList
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].id === item.id) {
                        if (!item.checked) {
                            arr[i].class = 'greenmark-rating-checked';
                            arr[i].checked = true;
                        } else {
                            arr[i].class = 'greenmark-rating';
                            arr[i].checked = false;
                        }
                    }
                }
                // 申明一个数组 notChoose,该数组是显示在场景中poi的类型
                let notChoose = []
                let checkCount = arr.filter(v => v.checked).length;
                if (checkCount === 4) {
                    this.switchValue = false
                    notChoose = []
                } else {
                    this.switchValue = true
                    notChoose = arr.filter(it => !it.checked).map(it => it.id)
                }

                let _arr = this.greenBuildingList.GreenBuilding.filter(it => {
                    return notChoose.includes(it.awardachieved)
                })
                console.log(_arr, '--------');
                this.$store.commit('app/SAVE_GREENMARK_POI_DATA', _arr);
                // checkCount === 4 ? this.switchValue = false : checkCount >= 0 ? this.switchValue = true : '';
            },
            //Green mark rating
            changeSwitch(val) {
                //console.log(val);

                //显示或隐藏poi点
                let jsondata = {
                    "id": "poi_id", //覆盖物id
                    "covering_type": "poi", //覆盖物类型, 详见下表
                    "bshow": true //true:显示; false:隐藏
                }
                let arr = this.greenmarkList

                arr.forEach(v => {
                    jsondata.id = v.guid;
                    jsondata.bshow = val;
                    if (val) {
                        v.class = 'greenmark-rating'
                        v.checked = true;
                    } else {
                        v.class = 'greenmark-rating-checked'
                        v.checked = false;
                    }
                    window.cloudRender.SuperAPI("ShowHideCovering", jsondata)
                })
                // if (!val) {
                //     for (let i = 0; i < arr.length; i++) {
                //         arr[i].class = 'greenmark-rating-checked';
                //         arr[i].checked = true;
                //     }
                //     console.log('去背景色');
                // } else {
                //     for (let i = 0; i < arr.length; i++) {
                //         arr[i].class = 'greenmark-rating';
                //         arr[i].checked = false;
                //     }
                //     console.log('加背景色');
                // }
                // console.log('来了吗');
            }
        },

        watch: {}

    }
</script>
<style scoped>

</style>